<template>
    <div>
        <tool-bar nav="" title='router4-gen'></tool-bar>

        <kv label="router4-def">
            <el-input type="textarea" v-model="$data.txt1" autosize></el-input>
        </kv>

        <kv>
            <el-button @click="gen">gen ⤵</el-button>
            <remark>适用于vue3 + vue-router4的路由生成规则！</remark>
        </kv>


        <pre v-html="$data.result"></pre>
    </div>
</template>
<script setup>
/**
 * Created by CodeGenerator
 */


//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs()

// 定义选项
defineOptions({
    name: "router4-gen",
    inheritAttrs: false,
});

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);


//定义data
const $data = reactive({
    txt1: "",
    result: ""
})


//定义 onMounted 方法
onMounted(() => {
    jv.$loadData("txt1", v=> $data.txt1 = v )
});


const gen = function() {
    jv.$saveData("txt1",$data.txt1);

    var exp = "t =>{ return " + $data.txt1 + "} "
    var data = eval(exp)();

    var groupEntities = [];

    Object.keys(data).forEach(it => {
        var group = it.getKebabCase();
        var entities = [];
        var def = data[it];
        Object.keys(def).forEach(ent => {
            var tableName = def[ent];
            var entity = ent.getKebabCase();
            entities.push({tableName, entity})
        })

        groupEntities.push({group, entities})
    })


    var ret = [];
    groupEntities.forEach(def => {
        var group = def.group;
        var ents = def.entities;

        ents.forEach(ent => {
            ret.push(`
{
    path: '/${group}/${ent.entity}/list',
    meta: {tab: "${ent.tableName}"},
    component: () => import("../view/${group}/${ent.entity}/${ent.entity}-list.vue"),
    views:[
        {
            path: '/${group}/${ent.entity}/:action(add|edit|view)/:id?',
            meta: {tab: "${ent.tableName}"},
            props: true,
            component: () => import("../view/${group}/${ent.entity}/${ent.entity}-card.vue")
        }
    ]
}`)
        })
    })

    $data.result = " var routes = [ \n" + ret.join(",") + "\n ];\n export default routes;\n"
}

</script>

<style lang="scss" scoped>

::v-deep(.kv > .k) {
    flex: 1;
}

::v-deep(.kv > .v > :first-child) {
    max-width: unset;
}

.grid {
    position: relative;
    margin-left: 20px !important;
    margin-top: 20px !important;


    ::v-deep(textarea), ::v-deep(.el-col), ::v-deep(.el-textarea) {
        height: 100%;
    }
}

.op_column {
    padding-top: 150px;
    padding-bottom: 150px;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    align-content: space-around;
    position: relative;
    height: 100%;


    button {
        display: block;
        margin: 10px 6px;
    }

}
</style>